<template>
	<div style="display: flex;flex-direction: row;justify-content:space-around">
		<p>登分管理 - 批量登分</p>
		<p>当前班级：{{data.clzno}}一一&nbsp;&nbsp;&nbsp;当前课程：{{data.cno}}一一</p>
		<p><button @click="save()">批量保存成绩...</button></p>
	</div>
	<div>
		<table style="width: 90%;" border="1" cellspacing="0">
			<tbody>
				<tr>
					<th>成绩编号</th>
					<th>学生姓名</th>
					<th>班级名称</th>
					<th>课程名称</th>
					<th style="width: 35%;">分数</th>
				</tr>
				<tr v-for="m in data.marks">
					<td>{{m.sno}}</td>
					<td>{{m.user.uname}}</td>
					<td>{{m.user.clz.clzname}}</td>
					<td>{{m.course.cname}}</td>
					<td><input type="text" v-model="m.score" /></td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script setup>
	import { onMounted, reactive, ref } from 'vue';
	import router from '@/router';
	import { useRoute } from 'vue-router';
	import { $postx,$postj } from '@/ajax';
	import store from '@/store';

	const route = useRoute();
	
	const data = reactive({
		marks:[],
		cno:'',
		clzno:''
	})
	
	const save = () =>{
		let obj = [];
		//提交走json格式，将marks中需要的内容提取出来并存储到容器中
		for(let i=0;i < data.marks.length;i++){
			let mark = data.marks[i]
			let json = {}
			json.id = mark.id
			json.sno = mark.sno
			json.cno = mark.course.cno
			json.score = parseInt(mark.score)
			obj.push(json);
		}
		console.dir(obj)
		$postj("/api/fore/tea/addMark",obj)
		.then( (resp) =>{
			console.dir(resp.data)
			if(resp.data.code == 200){
				console.log('成绩添加成功')
				store.state.msg='成绩添加成功'
			}
		})
	}
	
	onMounted(()=>{
		data.clzno = route.query.clzno
		data.cno = route.query.cno
		//集成对象
		let p = {clzno:data.clzno,cno:data.cno}
		
		$postx("/api/fore/tea/findMark",p)
		.then( (resp) => {
			data.marks = resp.data.data
		})
		
		
	})
	
</script>

<style>
</style>